<template>
  <div>
    <div class="header"
    v-show="!showAbs"
    >
      景点详情
      <router-link to="/">
        <div class="header-left">
          <div class="iconfont back-icon">&#xe620;</div>
        </div>
      </router-link>
    </div>

<!-- 图片的返回-->
      <router-link
        to="/"
        tag="div"
        class="header-abs"
        v-show="showAbs"
      >
        <div class="iconfont back-icon">&#xe620;</div>

      </router-link>
  </div>
</template>

<script>

export default {
  name: "DetailHeader",
  data (){
    return {
      showAbs: true
    }
  },
  methods:{
    handleScroll () {
      const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      if (top > 60){
        this.showAbs = false
      }else {
        this.showAbs = true;
      }
    }

  },
  mounted() {
    window.addEventListener('scroll',this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll',this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
.header-abs
  position absolute
  left: .2rem
  top: .2rem
  width: .8rem
  height: .8rem
  line-height: .8rem
  border-radius: .4rem
  text-align: center
  background: rgba(0, 0, 0, .8)
  color white
.header
  display flex
  justify-content center
  height .86rem
  line-height .86rem
  background #00bcd4
  color white
  position fixed
  left 0
  right 0
  top 0

  .header-left
    position absolute
    left 0
    top 0
    width .64rem
    color #fff

</style>
